{extend name="common/main"}

{block name="css"}
<link rel="stylesheet" href="/static/assets/css/bootstrap.min.css" />
{/block}

{block name="body"}
<body data-type="widgets">
{include file="common/index"}
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">

                <div class="widget am-cf">
                    <div class="widget-title  am-cf">报警详情
                        <form action="{:Url('callpolice_details')}" method="post" style="padding-bottom: 10px;padding-left: 10px" >

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">设备号：</label>
                                    <input type="text" value="{$Request.post.imei}" name="imei" placeholder="请输入设备号">

                                    <input type="text"  placeholder="开始时间" value="{$Request.post.start}" data-am-datepicker name="start" id="my-start-2"  style="margin-left: 15px"/>
                                    到
                                    <input type="text"  placeholder="结束时间" value="{$Request.post.end}" data-am-datepicker name="end"  id="my-end-2"/>
                                    <button type="submit"  class="am-btn am-btn-primary am-radius" style=" padding: .3em 1em;">查询</button>
                                    <button type="button" onclick="exc_button()" class="am-btn am-btn-primary am-radius" style=" padding: .3em 1em;float: right">导出Excel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>设备号</th>
                                <th>出/进入</th>
                                <th>出入次数</th>
                                <th>位置</th>

                                <th>记录时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name='data' id='v'}
                            <tr class="gradeX">
                                <td>{$v.id}</td>
                                <td>{$v.imei}</td>
                                <td>{$v.data}</td>
                                <td>{$v.num}</td>
                                <td>{$v.place}</td>

                                <td>{$v.addtime|date='Y-m-d H:i:s',###}</td>
                            </tr>
                            {/volist}
                            <!-- more data -->
                            </tbody>
                        </table>
                    </div>
                    <div class="am-u-lg-10 am-cf">

                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                                {$data->render()}
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
{/block}
{block name="js"}
<script>
    $(function() {
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var $myStart2 = $('#my-start-2');

        var checkin = $myStart2.datepicker({
            onRender: function(date, viewMode) {
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function(ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.close();
            $('#my-end-2')[0].focus();
        }).data('amui.datepicker');

        var checkout = $('#my-end-2').datepicker({
            onRender: function(date, viewMode) {
                var inTime = checkin.date;
                var inDay = inTime.valueOf();
                var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
                var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

                // 默认 days 视图，与当前日期比较
                var viewDate = inDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = inMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = inYear;
                        break;
                }

                return date.valueOf() <= viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function(ev) {
            checkout.close();
        }).data('amui.datepicker');
    });

    //导出
    function exc_button() {
        $imei= $("[name='imei']").val();
        $start= $("[name='start']").val();
        $end= $("[name='end']").val();
        window.location.replace("{:url('export_cal')}?imei="+$imei+"&start="+$start+"&end="+$end);

    }
</script>
{/block}